<template>
  <form @submit.prevent="submitFeedback" class="feedback-form">
    <textarea v-model="feedback" placeholder="请输入反馈..." required></textarea>
    <button type="submit">提交反馈</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      feedback: ''
    };
  },
  methods: {
    submitFeedback() {
      console.log("用户反馈:", this.feedback);
      alert("反馈已提交，谢谢！");
      this.feedback = '';
    }
  }
};
</script>

<style scoped>
.feedback-form {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  margin: 20px 0;
}

textarea {
  width: 100%;
  max-width: 400px; /* 设置最大宽度以保持居中效果 */
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}

button {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>